<script setup>
  import { onMounted, ref } from 'vue'

  const props = defineProps({
    value: {
      type: Number,
      default: 0
    }
  })
  const show = ref(props.value)
  onMounted(() => {
    setTimeout(() => animation(0, props.value), 500)
    setInterval(() => animation(0, props.value), 8000)
  })

  function judgeFloat(from, to) {
    if (from % 1 !== 0 || to % 1 !== 0) {
      return 2
    }
    return 0
  }

  function animation(from, to, duration = 2000) {
    let number = from
    const start = Date.now()
    const speed = (to - from) / duration

    function _run() {
      const t = Date.now() - start
      if (t >= duration) {
        number = to
        show.value = number
        return
      }
      number = (from + t * speed).toFixed(judgeFloat(from, to))
      show.value = number
      requestAnimationFrame(_run)
    }

    _run()
  }
</script>
<template>
  {{ show }}
</template>
